<template>
	<view  style="position: absolute; width: 100%;height: 100%;"  @touchstart="handleTouchStart" @touchend="handleTouchEnd">
	
	<view class="p-2">
			<u-skeleton :loading="tiloading" :animate="true">
				<u-row justify="space-between">
					<u-col span="5">
						<u-row justify="space-between">
							<u-col span="6">
								<text class="u-primary">{{topics[cur-1].type}}</text>
							</u-col>
							<u-col span="3">
								<text class="text-dark">{{cur}}
								
								<text class="text-light-muted">/{{total}}</text>
								</text>
								
							</u-col>
							<u-col span="3">
								
							</u-col>
						</u-row>
					</u-col>
					<u-col span="4">
						
					</u-col>
					<u-col span="3">
						<u-button @click="submitAll" type="primary" text="立即交卷" size="small" :plain="true"></u-button>
					</u-col>
				</u-row>
			</u-skeleton>
			
			<view class="my-2">
				<u-line-progress :height="5" :showText="false" :percentage="completedCount/total*100" activeColor="#3cb7ff"></u-line-progress>
			</view>
				
		</view>
		
	<view class="px-2">
		<u-skeleton :loading="tiloading" :animate="true">
			<view class="shadow rounded text-light-black font-md font-weight-bold">
				<view class=" p-2 bg-light-muted rounded-top">
							
								
								<view class="d-inline-block">
									<text style="word-wrap: break-word;">{{cur}}.{{topics[cur-1].content}}（{{topics[cur-1].score}}分）</text>
								</view>
						
							
				</view>
				<view class="p-3 flex justify-center align-center" v-if="topics[cur-1].img && topics[cur-1].img!=''">
					
						<image class="shadow rounded-lg" :src="topics[cur-1].img" style="width: 350rpx;height: 300rpx;" mode=""></image>
					
				 	
				 </view>
			</view>
		
	
		
		 </u-skeleton>
		 	
		 	
		<view class="">
		 
		 	<view class=""  v-for="option,index of topic.options" :key="index" >
				<view  @click="toggleOption(index)"  class="shadow rounded p-1 my-2  text-light-muted">
					<u-row justify="space-between">
						<u-col span="1">
							<view :class="{'option-select':topic.state[index]}" class="d-inline-block rounded-circle p-2  text-center bg-light-gray font" style="line-height: 30rpx; width: 30rpx;height: 30rpx;">
										
								<text >{{String.fromCharCode(index+65)}}</text>
									
							</view>
						</u-col>
						
						<u-col span="11">
							<view class="d-inline-block p-2" :class="{'text-select':topic.state[index]}">
								<text class="font">{{option}}</text>
							</view>
							
						</u-col>
					</u-row>
				</view>
					
		 	</view>
			
		 </view>
	</view>
	
		<view class=" fixed-bottom shadow-top animate__animated animate__slideInUp" style="z-index: 20000; background-color: #FFFFFF;">
				<view class="p-2">
					<u-row justify="space-between">
						<u-col span="6"
						>
						<u-row justify="space-between"> 
							<u-col span="6"><u-icon @click="openSheet" name="file-text" label="答题卡" size="20"></u-icon></u-col>
							<u-col span="6">
								<text class="text-light-muted" :class="timeColor">{{remainTime}}</text>
							</u-col>
						</u-row>
						</u-col>
						<u-col span="1"></u-col>
						<u-col span="5"
						>
						<u-row justify="space-between">
							<u-col span="5">
								<template v-if="cur!==1">
										<u-button @click="lastTopic"  text="上一题" type="primary" size="small"></u-button>
								</template>
							
								</u-col>
							<u-col span="1"></u-col>
							<u-col span="5">
								<template v-if="cur!==total">
										<u-button @click="nextTopic" text="下一题" type="primary" size="small"></u-button>
								</template>
							
									
								</u-col>
							<u-col span="1"></u-col>
						</u-row>
						
						</u-col>
					</u-row>
				</view>
		
			<view v-show="sheetShow" class="p-4 border-top ">
				<view class="p-2" v-for="i in sheetRow" :key="i">
					<!-- {{sheetRow}} -->
					<!-- {{i}} -->
					<u-row justify="space-between">
						
							<view class="" v-for="j in 6" :key="j">
								<!-- {{j}} -->
								<u-col :span="2">
								
									<view  :class="{'correct':cur===(i)*6+j+1,'transparent':i+1===sheetRow&&j+1>sheetCol(i), 'completed':topics[(i)*6+j]?topics[(i)*6+j].completed:false&&cur!==(i)*6+j}" @click="cur=(i)*6+j+1"  class="rounded-circle bg-light-gray p-2 text-center text-dark font-sm " style="width: 30rpx;height: 30rpx;line-height: 30rpx;">
										{{(i)*6+j+1}} 
									</view>
										
								
								</u-col>
							</view>
					</u-row>
				</view>
			</view>

			
			
		</view>
	<u-overlay :show="sheetShow" @click="sheetShow = false"></u-overlay>
	</view>
</template>

<script>
	import pubsub from 'pubsub-js'
	
	export default{
		data()
		{
			return{
				tiloading:true,
				sheetShow:false,
				time:10,
				topics:[ 
					{
						content:'',
						type:'选择题',
						options:[],
						answer:'',
						category:'历史',
						score:10
						
					}
				],
				activeOption:[
					"bg-primary", 
					"text-white"
				],
				cur:1, 
				tempTime:0,
				touchStartTime:0,
				touchStartX:0,
				touchStartY:0,
				lastOptionIndex:0
			}
		}, 
		watch:{
			time(a,b)
			{
				// console.log(a)
				if(a<=0)
				this.submitAll()
			}
		},
		computed:{
			topic()
			{
				return this.topics[this.cur-1]
			},
			timeColor()
			{
				
			
				if(this.time<=this.tempTime*0.2)
				{
					
					return 'red'
				}
				else if(this.time<=this.tempTime*0.5)
				{
					
					return 'orange'
				}
				else if(this.time<=this.tempTime*0.8)
				{
					
					return 'green'
				}
				
					
			}, 
			remainTime()
			{
				
				let hour=Math.floor(this.time/3600)
				let min=Math.floor((this.time%3600)/60)
				let sec=Math.floor((this.time%3600)%60)
			
				let res=(hour<10?'0'+hour:hour)+':'+(min<10?'0'+min:min)+':'+(sec<10?'0'+sec:sec)
				return res
			},
			total()
			{
				return this.topics.length;
			},
			sheetRow()
			{
				return Math.ceil(this.topics.length/6);
			},
			completedCount()
			{
				if(this.tiloading)
					return
				let temp=0;
				this.topics.forEach((x,index)=>{
					if(!x.state.every(x=>x===false))
					{
						this.topics[index].completed=true
						temp++
						
					}
					else
					{
						this.topics[index].completed=false
					}
						
				})
				console.log(temp)
				return temp;
			}
			
		},
		async beforeMount() {
			uni.showNavigationBarLoading()
			let res=await uniCloud.callFunction({
				name:"getTi"
				// data:{category:'党史'},
			})
			this.tiloading=false
			
			// let count=Math.round(Math.random()*20)
			console.log(res)
			this.topics=this.$mu.getRandomArrayElements(res.result.data,10)
		
			this.time=10*this.topics.length
			this.tempTime=this.time;
	// 		for(let i=0;i<count;i++)
	// 		{ 
	// 			let temp={
	// 					options:[1,2,3],
	// 					score:10,
	// 					type:"单选题",
	// 					content:"《金陵春梦》中蒋介石少年时曾到军校上学，当时军校是谁办的？在哪儿？",
	// 					answer:[]
	// 				}
					
	// 			temp.type=['单选题','多选题','判断题'][Math.round(Math.random()*2)]
	// 			if(temp.type==='多选题')
	// 			{
	// 				temp.answer.push(0,1) 
	// 			}
	// 			else
	// 			{
	// 				temp.answer.push(0)
	// 			}
	
	// 			this.topics.push(temp)
	// 		}
			//用state保存选项状态
			for(let i=0;i<this.topics.length;i++)
			{
				this.topics[i]["state"]=new Array(this.topics[i].options.length)
				this.topics[i]["state"].fill(false)
				this.topics[i]["completed"]=false
			}
			setInterval(()=>{
				if(this.time>0) 
					this.time-=1
			},1000) 
			uni.hideNavigationBarLoading()
			console.log(this.topics)
		},
		mounted() { 
	 
			
			this.pubid=pubsub.subscribe('answer',this.onAnswer)
		
		
			
				
			
			
		}, 
		beforeDestroy() {
			pubsub.unsubscribe(this.pubid)
		},
		methods:{
			handleTouchStart(e)
			{
				
				this.touchStartTime=Date.now()
				const touch=e.changedTouches[0]
				this.touchStartX=touch.clientX
				this.touchStartY=touch.clientY
			},
			handleTouchEnd(e)
			{
				
				const endTime=Date.now()
				const touch=e.changedTouches[0]
				const endX=touch.clientX
				const endY=touch.clientY
				if(endTime-this.touchStartTime>2000)return
				let direction=''
				// console.log(Math.abs(endX-this.touchStartX))
				if(Math.abs(endX-this.touchStartX)<10&&Math.abs(endY-this.touchStartY<10))
				{
					return
				}
				direction=endX-this.touchStartX>0?'right':'left'
				if(direction==='left'&&this.cur<this.topics.length)this.cur++
				if(direction==='right'&&this.cur>1)this.cur--
				console.log(direction)
			},	
			sheetCol(index)
			{
				
				let temp=index*6
				if((this.topics.length-temp)>=6)
					return 6
				else
				{
					
					return this.topics.length-temp
				}
			},
		
			toggleOption(x){
				
				this.topic.state[x]=!this.topics[this.cur-1].state[x]
				this.topics.splice(0,0)
				if(this.topics[this.cur-1].type==='单选题' || this.topics[this.cur-1].type==='判断题')
				{
					if(x!==this.lastOptionIndex)
						this.topic.state[this.lastOptionIndex]=false
				}
				this.lastOptionIndex=x
				console.log(this.topic.state)
				
			},
			submitAll()
			{
				// console.log("提交试卷")
				console.log(this.tempTime)
				console.log(this.time)
				uni.redirectTo({
					url: '../result/result?params='+encodeURIComponent(JSON.stringify({
						topics:encodeURIComponent(JSON.stringify(this.topics)),
						time:this.tempTime-this.time
					})),
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); 
			},
			openSheet()
			{
				
				this.sheetShow=true;
			},
			nextTopic()
			{
				this.cur++;
				console.log(this.topics[this.cur-1].state)
			
			},
			lastTopic()
			{
				this.cur--;
				
			}
		}
	}
</script>

<style scoped>
	.correct{
			color: #007AFF;
			background-color: rgba(0, 170, 255, 0.2);
			border: #00aaff solid 1rpx;
		}
	.text-select{
		color:  #007bff;
	}
	.option-select{
		background-color:  #007bff;
		color: #FFFFFF;
	}
	.completed{
		background:rgba(5, 138, 255, 0.2) ;
		color: #00aaff;
	}
	.transparent{
		opacity: 0;
		pointer-events: none;
	}
	.green{
		color: #4CD964;
	}
	.orange{
		color: #F9AE3D;
	}
	.red{
		color:#ff0000
	}
	.move-enter-active,.move-leave-active{
		transition:all 0.5s;
	}
	.move-enter,.move-leave-to{
		/* height: 0; */
		opacity: 0;
	}
	.move-enter-to,.leave-enter{
		/* height: 100%; */
		opacity: 1;
	}
	
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter, .slide-fade-leave-to{
	  transform: translateX(10px);
	  opacity: 0;
	}
	
	
</style>
